<template>
  <div class="app-container user-reward-page">
    <!-- 搜索区域 -->
    <div class="search-wrapper">
      <el-form :model="queryParams" :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="queryParams.name"
            placeholder="搜索商品名称"
            class="search-input"
            @keyup.enter.native="handleQuery"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleQuery"
            />
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryParams.sortType"
            placeholder="综合排序"
            class="sort-select"
            @change="handleQuery"
          >
            <el-option label="综合排序" value="0" />
            <el-option label="积分升序" value="1" />
<!--            <el-option label="积分降序" value="2" />-->
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 商品展示区域 -->
    <div class="product-list">
      <el-row :gutter="20">
        <el-col
          v-for="item in rewardList"
          :key="item.id"
          :xs="12"
          :sm="8"
          :md="6"
          :lg="4"
          :xl="4"
          class="product-item"
        >
          <el-card :body-style="{ padding: '10px' }" shadow="hover">
            <div class="product-image">
              <image-preview
                :src="item.imageUrl"
                :preview-src-list="[item.imageUrl]"
                fit="cover"
              />
            </div>
            <div class="product-info">
              <h4 class="product-title">{{ item.name }}</h4>
              <p class="product-desc">{{ item.description }}</p>
              <div class="price-area">
                <span class="points-cost">{{ item.pointsCost }}积分</span>
                <span v-if="item.stock > 0" class="stock">库存{{ item.stock }}件</span>
              </div>
              <div class="action-area">
                <el-button
                  type="danger"
                  round
                  class="exchange-btn"
                  :disabled="item.stock <= 0"
                  @click="handleExchange(item)"
                >
                  <i class="el-icon-shopping-cart-2" />立即兑换
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listReward,exchangeReward } from "@/api/reward/reward";

export default {
  name: "UserReward",
  data() {
    return {
      loading: true,
      rewardList: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 12,  // 每页显示12个商品
        name: null,
        status: 1,     // 只显示已上架商品
        sortType: '0'   // 默认排序方式
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      // 处理排序参数
      const params = {
        ...this.queryParams,
        orderByColumn: this.queryParams.sortType === '1' ? 'pointsCost' :
          this.queryParams.sortType === '2' ? 'pointsCost desc' : null
      }

      listReward(params).then(response => {
        this.rewardList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    handleExchange(item) {
      this.$confirm(`确认兑换 ${item.name} 需要${item.pointsCost}积分?`, '兑换确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('用户确认兑换'+item.id)
        // 调用兑换接口
        exchangeReward(item.id)
          .then(() => {
            this.$message.success('兑换成功，请等待发货！');
            this.getList(); // 可选：刷新列表数据（如积分变动需要更新）
          })
          .catch(error => {
            this.$message.error('兑换失败：' + (error.message || '请联系管理员'));
          });
      }).catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.user-reward-page {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .search-wrapper {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);

    .search-input {
      width: 400px;
    }

    .sort-select {
      width: 120px;
    }
  }

  .product-list {
    .product-item {
      margin-bottom: 20px;

      .product-image {
        height: 200px;
        overflow: hidden;
        position: relative;
        border-radius: 4px;

        ::v-deep .el-image {
          width: 100%;
          height: 100%;
          transition: transform 0.3s;

          &:hover {
            transform: scale(1.05);
          }
        }
      }

      .product-info {
        padding: 10px;

        .product-title {
          font-size: 14px;
          color: #333;
          height: 40px;
          line-height: 20px;
          overflow: hidden;
          margin: 5px 0;
        }

        .product-desc {
          font-size: 12px;
          color: #999;
          height: 36px;
          line-height: 18px;
          overflow: hidden;
          margin: 5px 0;
        }

        .price-area {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0;

          .points-cost {
            color: #ff5000;
            font-size: 16px;
            font-weight: bold;
          }

          .stock {
            color: #666;
            font-size: 12px;
          }
        }

        .exchange-btn {
          width: 100%;
          padding: 10px;
          background: linear-gradient(135deg, #ff9000, #ff5000);
          border: none;
          color: #fff;
          font-weight: bold;

          i {
            margin-right: 5px;
          }

          &:hover {
            opacity: 0.9;
          }
        }
      }
    }
  }
}
</style>
